import React from "react";

import store from "../store";

export default function TodoItem(props) {
  function onChange(event) {
    console.log("onChange");
    // 1. 取选择的值
    const value = event.target.value;
    // 2. 派发action
    store.dispatch({
      type: "COLOR_CHANGE",
      id: props.id,
      color: value,
    });
  }

  return (
    <div className="todo-item">
      <div className="todo-item__checkbox">
        <div className="todo-checkbox">
          <input type="checkbox" defaultChecked={props.done} />
          <span></span>
        </div>
      </div>
      <div className="todo-item__text">{props.text}</div>
      <div className="todo-item__handle">
        <select defaultValue={props.color} onChange={onChange}>
          <option value=""></option>
          <option value="red">Red</option>
          <option value="blue">Blue</option>
        </select>
        <button className="todo-delete-button">删除</button>
      </div>
    </div>
  );
}
